<template>
  <div>
      <el-form :model="searchForm" inline label-width="80px">
        <el-form-item label="会员名称">
          <el-input v-model="searchForm.name" clearable placeholder="会员名称"/>
        </el-form-item>
        <el-form-item label="手机号码">
          <el-input v-model="searchForm.phone" clearable placeholder="手机号码"/>
        </el-form-item>
        <el-form-item label="性别">
          <el-select v-model="searchForm.sex" clearable placeholder="选择性别">
            <el-option label="男" :value="1"/>
            <el-option label="女" :value="2"/>
            <el-option label="未选择" :value="3"/>
          </el-select>
        </el-form-item>
        <el-form-item label="状态">
          <el-select v-model="searchForm.status" clearable placeholder="选择状态">
            <el-option label="可用" :value="1"/>
            <el-option label="禁用" :value="2"/>
          </el-select>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="getDataList">搜索</el-button>
          <el-button @click="clearForm">清空</el-button>
        </el-form-item>
      </el-form>
      <el-table :data="dataList" border>
        <el-table-column prop="vipId" label="编号" align="center"/>
        <el-table-column prop="name" label="会员名称" align="center"/>
        <el-table-column prop="openId" label="微信标识" align="center"/>
        <el-table-column prop="sex" label="性别" align="center">
          <template slot-scope="{row}">
            <span v-if="row.sex === 1">男</span>
            <span v-else-if="row.sex === 2">女</span>
            <span v-else>未选择</span>
          </template>
        </el-table-column>
        <el-table-column prop="birthday" label="出生日期" align="center"/>
        <el-table-column prop="phone" label="手机号码" align="center"/>
        <el-table-column prop="status" label="状态" align="center">
          <template slot-scope="scope">
            <el-button v-if="scope.row.status === 1" size="mini" type="success" @click="changeStatus(scope.row.vipId,2)">可用</el-button>
            <el-button v-else size="mini" type="danger" @click="changeStatus(scope.row.vipId,1)">禁用</el-button>
          </template>
        </el-table-column>
        <el-table-column label="操作" align="center" width="160px">
          <template slot-scope="scope">
            <el-button size="mini" @click="openDialog(scope.row.vipId)">详情</el-button>
            <el-button size="mini" @click="deleteInfo(scope.row.vipId)">删除</el-button>
          </template>
        </el-table-column>
      </el-table>
    <el-pagination hide-on-single-page :current-page="pageInfo.page" :page-size="pageInfo.limit" :page-sizes="[5,10,20,50,100]" @current-change="currentChange" @size-change="sizeChange" layout="total,sizes,prev,pager,next,jumper" :total="pageInfo.total"/>
    <vip-info ref="vipInfo"/>
  </div>
</template>

<script>
import VipInfo from '@/views/admin/vip/VipInfo.vue'
const initData = {
  name: '',
  phone: '',
  sex: '',
  status: ''
}
export default {
  name: 'VipList',
  components: { VipInfo },
  data () {
    return {
      searchForm: {
        ...initData
      },
      pageInfo: {
        page: 1,
        limit: 5,
        total: 0
      },
      dataList: []
    }
  },
  methods: {
    getDataList () {
      this.$http.get('vip/page', { ...this.searchForm, ...this.pageInfo }).then(data => {
        if (data) {
          this.dataList = [...data.records]
          this.pageInfo.total = data.total
        }
      }).catch(() => {})
    },
    currentChange (page) {
      this.pageInfo.page = page
      this.getDataList()
    },
    sizeChange (limit) {
      this.pageInfo.limit = limit
      this.getDataList()
    },
    clearForm () {
      this.searchForm = { ...initData }
      this.pageInfo = {
        page: 1,
        limit: 5,
        total: 0
      }
      this.getDataList()
    },
    changeStatus (vipId, status) {
      this.$confirm(`确定更改编号<span style="font-weight: bold;color: #66b1ff">[${vipId}]</span>的状态为${status === 1 ? '<span style="color: green;font-weight: bold;">可用</span>' : '<span style="color: red;font-weight: bold;">禁用</span>'}吗?`, '询问', { dangerouslyUseHTMLString: true }).then(() => {
        this.$http.post('vip/status', { vipId, status }).then(() => {
          this.$message.success('更新状态成功')
          this.getDataList()
        }).catch(() => {})
      }).catch(() => {})
    },
    deleteInfo (vipId) {
      this.$confirm(`确定删除编号<span style="font-weight: bold;color: #66b1ff">[${vipId}]</span>的数据吗?`, '询问', { dangerouslyUseHTMLString: true }).then(() => {
        this.$http.delete(`vip/delete/${vipId}`).then(() => {
          this.$message.success('删除成功！')
          this.getDataList()
        }).catch(() => {})
      }).catch(() => {})
    },
    openDialog (vipId) {
      this.$refs.vipInfo.init(vipId)
    }
  },
  created () {
    this.getDataList()
  }
}
</script>

<style scoped>

</style>
